<template>
    <tn-popup :model-value="props.showPopup" open-direction="bottom" height="100vh" :overlay-closeable="false">
        <view class="main">
            <view class="top" :style="{ paddingTop: systemInfo.titleTop + 'px' }">
                <view class="main-title dispaly-center" :style="{ height: systemInfo.sBarHeight + 'px' }">
                    <view class="title dispaly-just-between">
                        <view class="title-left" @click="closePop">
                            <tn-icon name="left" color="#000" size="40" />
                        </view>
                        <view class="title-right dispaly-center" @click="navTo(`/subPackage/index/selectCityPage`)">
                            <view class="title-text">重庆</view>
                            <view class="icon">
                                <tn-icon name="down-triangle" color="#000" />
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="content " :style="{ height: newsPanelHeight + 'px' }">
                <view class="centent-box dispaly h-100">
                    <view class="left h-100">
                        <scroll-view class="scroll" :class="paddingBottomClass" scroll-y="true"
                            :style="{ height: newsPanelHeight + 'px' }">
                            <view class="cate-box dispaly-col p-30">
                                <view :class="{ active: oneCateCurrent == index }" @click="oneCateClick(item, index)"
                                    class="item" v-for="(item, index) in oneCate" :key="index">{{ item.name }}</view>
                            </view>
                        </scroll-view>
                    </view>
                    <view class="midlle h-100">
                        <scroll-view class="scroll" :class="paddingBottomClass" scroll-y="true"
                            :style="{ height: newsPanelHeight + 'px' }">
                            <view class="cate-box dispaly-col p-30">
                                <view class="item" v-for="(item, index) in oneCate" :key="index">{{ item.name }}</view>
                            </view>
                        </scroll-view>
                    </view>
                    <view class="right h-100">
                        <scroll-view class="scroll" :class="paddingBottomClass" scroll-y="true"
                            :style="{ height: newsPanelHeight + 'px' }">
                            <view class="cate-box dispaly-col p-30">
                                <view class="item" v-for="(item, index) in oneCate" :key="index">{{ item.name }}</view>
                            </view>
                        </scroll-view>
                    </view>
                </view>
                <view class="btn fixed">
                    <view class="btn-box">
                        <view class="left-btn">清除</view>
                        <view class="right-btn">确定</view>
                    </view>
                </view>
            </view>
        </view>
    </tn-popup>
    <!-- 城市选择 -->
    <SelectCity :show-popup-city="cityShow" @close="show => cityShow = show" />
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';
import SelectCity from './selectCity.vue'
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { ref, computed } from 'vue';
import { getScreenSHeight } from '@/utils/util'
import type { AddressCateType } from '@/types/component'

let oneCate = ref<Array<AddressCateType>>([{ name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }, { name: '商圈', id: 1 }, { name: '地铁', id: 2 }])
let cateList = ref()

// 点击一级分类
let oneCateCurrent = ref<number>(0)
const oneCateClick = (_item: AddressCateType, index: number) => {
    oneCateCurrent.value = index
}


// 控制城市选择show
const cityShow = ref<boolean>(false)
// 底部padding距离
const paddingBottomClass = computed(() => props.tab ? 'p120' : 'p230')
interface PropsType {
    showPopup: boolean,
    tab: boolean
}
let systemInfo = uni.getStorageSync('systemInfo')
const props = defineProps<PropsType>()
const emit = defineEmits<{
    close: [show: boolean]
}>()
// 关闭弹窗
const closePop = () => {
    emit('close', false)
    if (props.tab) {
        uni.showTabBar()
    }
}

// 获取屏幕剩余高度
const newsPanelHeight = ref<number>(0)
onReady(async () => {
    newsPanelHeight.value = await getScreenSHeight(uni.getStorageSync('systemInfo').sBarHeight) as number
})
</script>

<style lang="scss" scoped>
.content {

    .centent-box {

        .scroll {
            .cate-box {
                .item:last-child {
                    margin-bottom: 0;
                }

                .item {
                    margin-bottom: 40rpx;
                }
            }
        }

        .left {
            background-color: #f8f8f8;
            flex: 1;
        }

        .midlle {
            background-color: #fff;
            flex: 1;
        }

        .right {
            background-color: #fff;
            flex: 1;
        }
    }

}

.p120 {
    padding-bottom: 120rpx;
}

.p230 {
    padding-bottom: 230rpx;
}
</style>